<template>
  <m-layout>
    <mt-header slot="header" title="办理报名" >
      <mt-button  slot="left" icon="back" @click="handleClose"></mt-button>
    </mt-header>
    <div slot="body" class="custom">
      <mt-field label="购课类别"  >
        <select @change='getBuyType' ref='buyType' >
          <option value='' disabled selected style='display:none;'>请选择购课类型</option>
          <option v-for='(item, index) in courseTypeList' :key='index'   :value ="item.value">{{item.label}}</option>
        </select>
      </mt-field>
      <mt-field label="付款类型"  >
        <select @change='getPayType' ref='payType'>
          <option value='' disabled selected style='display:none;'>请选择付款类型</option>
          <option v-for='(item, index) in payTypeList' :key='index'   :value ="item.value">{{item.label}}</option>
        </select>
      </mt-field>
      <mt-field label="实收（￥）" placeholder="请输入金额" type="number" v-model="from.signupFee"></mt-field>
      <div class="class-info" v-show='showClassInfoFlag'>
        <mt-field label="课程"  >
          <select @change='getCourseId' ref='courseId'>
            <option value='' disabled selected style='display:none;'>请选择课程</option>
            <option v-for='(item, index) in courseFormList' :key='index'   :value ="item.trainCourseSimpleVO.id">{{item.trainCourseSimpleVO.courseName}}</option>
          </select>
        </mt-field>
        <mt-field label="校区"  >
          <select @change='getSchoolId' ref='schoolId'>
            <option value='' disabled selected style='display:none;'>请选择校区</option>
            <option v-for='(item, index) in schoolList' :key='index' :value ="item.id">{{item.schoolName}}</option>
          </select>
        </mt-field>
        <mt-field label="班别"  >
          <select @change='getClassesId' ref='classesId'>
            <option value='' disabled selected style='display:none;'>请选择班级</option>
            <option v-for='(item, index) in classesList' :key='index'   :value ="item.classesId">{{item.classesName}}</option>
          </select>
        </mt-field>
        <mt-field label="次课"  v-if='from.buyType == 2' >
          <select @change='getTimesCourseCode' ref='timesCourseCode'>
            <option value='' disabled selected style='display:none;'>请选择次课</option>
            <option v-for='(item, index) in timesCourseList' :key='index'   :value ="item.timesCourseCode">{{item.timesCourseName}}</option>
          </select>
        </mt-field>
      </div>
    </div>
    <div slot="bottom" >
      <mt-button type="primary" size="large"  @click='submit'>添加</mt-button>
    </div>
  </m-layout>
</template>

<script>
import saleApi from 'api/sale.js'
import { mapState } from 'vuex'
import {MessageBox} from 'mint-ui'

export default {
  components: {
  },
  computed: {
    ...mapState({
      list: state => state.tactical.list
    })
  },
  data () {
    return {
      from: {
        studentId: 57848,
        saleUserId: 'seedp532476',
        buyType: '',
        payType: '',
        signupFee: '',
        courseId: '',
        schoolId: '',
        classesId: '',
        timesCourseCode: ''
      },
      courseFormList: [], // 办理报名可选的课程
      schoolList: [],
      classesList: [],
      timesCourseList: [],
      showClassInfoFlag: false,
      courseTypeList: [
        {
          label: '次卡',
          value: 2
        },
        {
          label: '普通班',
          value: '0,1'
        }
      ],
      payTypeList: [
        {
          label: '现金',
          value: 1
        },
        {
          label: '刷卡',
          value: 2
        },
        {
          label: '支付宝',
          value: 3
        },
        {
          label: '微信',
          value: 4
        }
      ]
    }
  },
  mounted () {
  },
  methods: {
    handleClose () {
      MessageBox.confirm('离开后信息将不保存', '确认离开？').then(action => {
        this.$router.go(-1)
      }).catch(action => {
      })
    },
    submit () {
      // 检测数据的完整性
      saleApi.applyRegistration(this.from).then(() => {
        // 重置表单数据
      }).catch(() => {
        // 没有提交成功
      })
    },
    // 选择购买类别
    getBuyType () {
      this.from.buyType = this.$refs.buyType.value
      if (this.from.buyType) {
        this.showClassInfoFlag = true
        saleApi.getCourseFormList({properties: this.from.buyType}).then((res) => {
          this.courseFormList = res.data
        })
      }
    },
    // 选择支付类型
    getPayType () {
      this.from.payType = this.$refs.payType.value
    },
    // 选择课程
    getCourseId () {
      this.from.courseId = this.$refs.courseId.value
      var myselectIndex = this.$refs.courseId.selectedIndex - 1
      this.schoolList = this.courseFormList[myselectIndex].simpleVOList
      this.classesList = this.courseFormList[myselectIndex].trainClassessVOS
      // 还需要过滤出，要求c开头
      this.timesCourseList = this.courseFormList[myselectIndex].trainTimesCourseRespVOS
    },
    getSchoolId () {
      this.from.schoolId = this.$refs.schoolId.value
    },
    getClassesId () {
      this.from.classesId = this.$refs.classesId.value
    },
    getTimesCourseCode () {
      this.from.timesCourseCode = this.$refs.timesCourseCode.value
    }
  }
}
</script>

<style lang="scss" scoped>
.custom{
  font-size: $font-size-small;
  .class-info{
    margin-top:0.2rem;
  }
  .item{
    background: #fff;
    height: 1rem;
    position: relative;
    z-index: 3;
    &:after{
      content: " ";
      border-top: 1px solid #aaa;
      display: block;
      height:0;
      width:100%;
      position: absolute;
      left: 0;
      bottom:0;
      transform: scaleY(0.5);
    }
  }
}
</style>

<style lang="scss" >
.custom{
  .mint-cell-wrapper{
  }
}
</style>
